<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡右键菜单</title>
    <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
    <script type="text/javascript" src="../js/easyui/jquery.easyui.min.js" ></script>
    <script type="text/javascript" src="../js/easyui/locale/easyui-lang-zh_CN.js" ></script>
    <link rel="stylesheet" href="../js/easyui/themes/default/easyui.css" />
    <link rel="stylesheet" href="../js/easyui/themes/icon.css" />
    <!-- 引入ztree -->
    <script src="../js/ztree/jquery.ztree.all-3.5.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="../js/ztree/zTreeStyle.css"/>
    <script type="text/javascript">
        //页面加载后执行
        $(function () {
            // 1、 进行ztree菜单设置
            var setting={
                data:{
                    simpleData:{
                        enable:true
                    }
                },
                callback:{
                    onClick:function (event,treeId,treeNode,clickFlag) {
                        var content='<div style="width:100%;height:100%;overflow:hidden;">'
                            + '<iframe src="'
                            + treeNode.page
                            + '" scrolling="auto" style="width:100%;height:100%;border:0;" ></iframe></div>';

                        // 没有page树形菜单，不打开选项卡
                        if (treeNode.page!=undefined&&treeNode.page!=""){
                            // 如果选项卡已经打开，选中
                            if($("#mytabs").tabs('exists',treeNode.name)){
                                $("#mytabs").tabs('select',treeNode.name);
                            }else{
                                $("#mytabs").tabs('add',{
                                   title:treeNode.name,
                                   content:content,
                                   closable:true
                                });
                            }
                        }
                    }
                }
            };

        // 2、提供ztree树形菜单数据
        var zNodes = [
            {id:1,pId:0,name:"父节点一"},
            {id:2,pId:0,name:"父节点二"},
            {id:11,pId:1,name:"子节点一"},
            {id:12,pId:1,name:"子节点二"},
            {id:13,pId:2,name:"传智播客",page:"http://www.itcast.cn"},
            {id:14,pId:2,name:"百度",page:"https://www.baidu.com"}
        ];

        // 3、生成菜单
        $.fn.zTree.init($("#baseMenu"), setting, zNodes);

        // 对选项卡注册 右键事件
        $("#mytabs").tabs({
            onContextMenu:function (e,tilte,index) {
                // 阻止默认菜单显示
                e.preventDefault();
                // 显示自定义右键菜单
                $("#mm").menu('show',{
                    left:e.pageX,
                    top:e.pageY
                });
            }
        });
        });
    </script>
</head>
<body class="easyui-layout">
    <div data-options="region:'north',title:'传智播客管理系统'" style="height: 100px;">北部区域</div>
    <div data-options="region:'west',title:'菜单导航'"style="width: 180px">
        <!--折叠面板-->
        <div class="easyui-accordion" data-options="fit:true">
            <div data-options="title:'基础菜单'">
                <!-- 通过ztree 插件，制作树菜单 -->
                <ul id="baseMenu" class="ztree"></ul>
            </div>
            <div data-options="title:'系统菜单'">面板二</div>
        </div>
    </div>
<div data-options="region:'center'">
    <!-- 选项卡面板-->
    <div id="mytabs" class="easyui-tabs"data-options="fit:true">
        <div data-options="title:'选项卡面板一',closable:true">选项卡面板一</div>
        <div data-options="title:'选项卡面板二'">选项卡面板二</div>
    </div>
</div>
    <div data-options="region:'east'" style="width: 80px;">东部区域</div>
    <div data-options="region:'south'" style="height: 80px;">南部区域</div>
    <!-- 菜单 初始化都是隐藏的-->
    <div id="mm" class="easyui-menu" style="width:120px">
        <div>关闭当前窗口</div>
        <div>关闭其他窗口</div>
        <div class="menu-set"></div><!-- 分隔线 -->
        <div data-options="iconCls:'icon-cancel'">关闭全部窗口</div>
    </div>
</body>
</html>